Jeg har en forkærlighed for at bruge AI-værktøjer til at hjælpe mig med at refaktorere kode, og i denne video viser jeg, hvordan jeg bruger Cline i VS Code med Sonnet 3.7 til at optimere en NextJS-applikation. Videoen starter med en udfordring, jeg ofte møder: en side i min NextJS-app var blevet en smule rodet med useClient og al logik samlet i én komponent. For at skabe en bedre arkitektur beder jeg Cline om at refaktorere koden, så den følger best practices for React server components og client components. I projektet har jeg defineret nogle design rules, som AI'en er blevet trænet til at følge. En af de vigtige regler er at implementere det rette skeleton loading pattern, hvor: 1) Siden bruger en Suspense-komponent 2) Indeholder et elegant skeleton layout 3) Loader data korrekt 4) Bruger klienten til at rendere det faktiske indhold Det mest imponerende er, hvordan Cline automatisk genererer skeletons, der faktisk ligner datastrukturen i det endelige komponent uden at jeg behøver at specificere detaljerne. Den bryder koden ned i mere vedligeholdelsesvenlige dele: en page-komponent der wrapper en Suspense, og derunder forskellige komponenter der håndterer data loading og visning. For at kunne se skeletons i aktion under udvikling, tilføjer jeg et lille delay på 5 sekunder til data loaderen - selvfølgelig kun i udviklingsmiljøet. Dette giver mig mulighed for at vurdere brugeroplevelsen under loading. Det er fascinerende at se, hvordan AI-værktøjer nu kan hjælpe med at implementere komplekse arkitekturmønstre, der tidligere ville kræve meget manuel kodning og omtanke. Det viser virkelig styrken ved "vibe coding" tilgangen, hvor AI assisterer med at implementere best practices, mens jeg kan fokusere på det større billede.